<template>
  <div class="box personal">
      <van-nav-bar
        left-arrow
        title="个人中心"
        right-text="取消"
        @click-left="$router.back()"
        @click-right="onClickRight"
      />
    <div class="cont">
      <header class="headerBox">
        <van-uploader :after-read="afterRead" :max-size="1024*25" @oversize="oversize">
          <van-image
            round
            width="1rem"
            height="1rem"
            :src="avatar"
          />
        </van-uploader>
      </header>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          readonly
          @click="onusername"
        />
        <van-field
          v-model="tel"
          type="email"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          readonly
          @click="ontel"
        />
        <van-field
          v-model="nickName"
          name="昵称"
          label="昵称"
          placeholder="昵称"
        />
        <van-field
          v-model="email"
          name="email"
          label="email"
          placeholder="email"
        />
        <van-field
          readonly
          clickable
          name="生日"
          :value="value"
          label="生日"
          placeholder="点击选择时间"
          @click="showPicker = true"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-datetime-picker
            @cancel="showPicker=false"
            @confirm="onConfirm"
            v-model="currentDate"
            type="date"
            title="选择年月日"
            label="生日"
            :min-date="minDate"
            :max-date="maxDate"
          />
        </van-popup>
        <van-field
          v-model="regTime"
          name="注册时间"
          label="注册时间"
          readonly
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Uploader, Toast, Image as VanImage, Form, Field, Calendar, DatetimePicker, Popup, Button } from 'vant'

import { getPresonal, setUserImg, setPresonal } from '../../api/index.js'

Vue.use(NavBar)
Vue.use(Uploader)
Vue.use(Toast)
Vue.use(VanImage)
Vue.use(Form)
Vue.use(Field)
Vue.use(Calendar)
Vue.use(DatetimePicker)
Vue.use(Popup)
Vue.use(Button)

export default {
  data () {
    return {
      username: '',
      tel: '',
      avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
      nickName: '临时用户',
      value: '',
      hobby: '',
      email: '',
      regTime: '',
      showPicker: false,
      minDate: new Date(1970, 0, 1),
      maxDate: new Date(),
      currentDate: new Date()
    }
  },
  mounted () {
    getPresonal({
      userId: localStorage.getItem('userId')
    }).then(res => {
      console.log(res)
      this.avatar = res.data.data.headPhoto
      if (res.data.data.nickName !== '') {
        this.nickName = res.data.data.nickName
      }
      this.username = res.data.data.userName
      this.tel = res.data.data.tel
      this.hobby = res.data.data.hobby
      this.value = res.data.data.birthday
      this.email = res.data.data.email
      this.regTime = new Date(Number(res.data.data.joinDate)).toLocaleDateString()
      // this.regTime = Date.now(res.data.data.regTime)
    })
  },
  methods: {
    onClickRight () {
      this.$router.back()
    },
    onusername () {
      Toast('不允许修改用户名')
    },
    ontel () {
      Toast('不允许修改手机号')
    },
    afterRead (val) {
      // console.log(val)
      setUserImg({
        userId: localStorage.getItem('userId'),
        userData: {
          avatar: val.content
        }
      }).then(res => {
        // console.log(res)
        this.avatar = res.data.data.headphoto
      })
    },
    oversize () {
      Toast('图片大小不允许超过25K')
    },
    onSubmit () {
      setPresonal({
        userId: localStorage.getItem('userId'),
        userData: {
          nickName: this.nickName,
          email: this.email,
          birthday: this.value
        }
      }).then(data => {
        Toast('修改成功')
        this.$router.push('/my')
      })
    },
    onConfirm (val) {
      // console.log(val)
      this.value = val.toLocaleDateString()
      this.showPicker = false
    }
  }
  // beforeRouteEnter (to, from, next) {
  //   if (localStorage.getItem('isLogin') === 'ok') {
  //     next()
  //   } else {
  //     next('/login?to=' + to.path)
  //   }
  // }
}
</script>

<style lang="scss">
  .personal{
    .headerBox{
      .van-uploader{
        margin-top: 0.2rem;
        width: 100%;
        .van-uploader__wrapper{
          width: 100%;
          .van-uploader__input-wrapper{
            width: 100%;
            display: flex;
            justify-content: center;
            .userName{
              align-self: center;
              margin-left: 0.1rem;
            }
          }
        }
      }
    }
  }
</style>
